<template>
    <Viewport title="Identify" icon="/src/assets/icons/identify.png" :class="{'z-40': focus}" @muti="muti" @cancel="cancel" @mousedown="changeFocus">
        <div class="h-full w-full bg-white border-solid relative border-t-2 rounded-b-md">
            <div class="absolute top-2/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ">
                
                <img :src=urls alt="">
                
                <div class="inline-block relative h-16 w-20 px-3 py-5 rounded-lg text-center
                shadow-lg uppercase tracking-widest bg-indigo-500
                text-white hover:bg-indigo-400 hover:-translate-y-0.5
                transform transition focus:ring-2 focus:ring-offset-2
                active:bg-indigo-700">
                    <span class="absolute pl-3">上传</span>
                    <input class="h-full w-full opacity-0" ref="upload" type="file" name="file" @change="upload"/> 
                </div>
                
                <a class="inline-block px-3 py-5 ml-4 rounded-lg
                shadow-lg uppercase tracking-widest bg-indigo-500
                text-white hover:bg-indigo-400 hover:-translate-y-0.5
                transform transition focus:ring-2 focus:ring-offset-2
                active:bg-indigo-700" @click="handleClick">
                    查询结果
                </a>
                <span>{{result}}</span>
            </div>
        </div>
    </Viewport>
</template>

<script setup>
    import { computed, ref } from '@vue/reactivity';
    import { getCurrentInstance } from '@vue/runtime-core';
    import Viewport from '../components/Viewport.vue';
    import axios from 'axios';
import { store } from '../store';

    const filename = ref('')

    const ctx = getCurrentInstance()

    const urls = computed(() => {
        return `82.157.137.133:6789/img/${filename.value}`
    })

    const result = ref('')

    const upload = (e) => {
        let formData = new FormData()

        let file = e.target.files[0]
        filename.value = file.name
        formData.append('name', file.name)
        formData.append('file', file)
        console.log(formData.get('file'))
        axios.post("http://82.157.137.133:6789/upload",formData,{
            "headers":{
                "Content-Type":"multipart/form-data",
                'Origin': 'http://82.157.137.133:6789',
            }
        }).then((res) => [
            console.log(res)
        ])
    }

    const handleClick = () => {
        if(!filename.value) {
            console.log('nonono')
            return
        }
        axios.get(`http://82.157.137.133:6789/result/${filename.value}.txt`,{
            "headers":{
                'Origin': 'http://82.157.137.133:6789',
            }
        }).then((res) => {
            console.log(res)
            result.value = res.data.split('\n')[1]
        })
    }



    const focus = computed(() => store.state.focus === 'identify')
    const changeFocus = () => {
        store.commit('CHANGE_FOCUS', 'identify')
    } 
    const muti = () => {
        store.commit('CHANGE_IDENTIFY_SHOW', false)
        store.commit('CHANGE_FOCUS', '')
    }
    const cancel = () => store.commit('CHANGE_IDENTIFY_ACTIVE', false)

</script>